<div class="row gx-2" [formGroup]="form">
    <div class="col col-3">
        <sqx-control-errors for="action" />
        <select class="form-select schemas-control" formControlName="schemaId">
            @for (schema of schemas; track schema.id) {
                <option [ngValue]="schema.id">{{ schema.displayName }}</option>
            }
        </select>
    </div>

    <div class="col-auto">
        <div class="label text-muted">{{ "rules.when" | sqxTranslate }}</div>
    </div>

    <div class="col">
        <sqx-control-errors for="condition" />
        <sqx-code-editor [completion]="completions | async" formControlName="condition" singleLine="true" />
    </div>

    <div class="col-auto">
        <button
            class="btn btn-text-danger"
            confirmRememberKey="deleteContentChangedSchema"
            confirmText="i18n:rules.deleteContentChangedSchemaText"
            confirmTitle="i18n:rules.deleteContentChangedSchemaTitle"
            [disabled]="form.disabled"
            (sqxConfirmClick)="remove.emit()"
            type="button">
            <i class="icon-bin2"></i>
        </button>
    </div>
</div>
